<script>
export default {
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
}
</script>

<style>
/* 全局重置样式 */
view, text, image, button, input {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面公共样式 */
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 通用按钮样式 */
.btn {
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  transition: all 0.3s ease;
}

.btn:after {
  border: none;
}

/* 卡片阴影 */
.card-shadow {
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 渐变背景 */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 毛玻璃效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.95);
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
}

/* 通用动画 */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 点击反馈 */
.click-feedback {
  transition: all 0.2s ease;
}

.click-feedback:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* 通用网格布局 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

/* 文本省略 */
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
